<template>
    <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
      <div class="h-48 bg-primary/10 relative">
        <div class="absolute top-3 right-3 bg-white rounded-full p-2 shadow-md">
          <i class="fa fa-file-text-o text-primary"></i>
        </div>
        <div class="absolute inset-0 flex items-center justify-center">
          <canvas :id="'datasetChart' + dataset.id" width="300" height="200"></canvas>
        </div>
      </div>
      <div class="p-4">
        <div class="flex justify-between items-start mb-2">
          <h3 class="font-medium">{{ dataset.name }}</h3>
          <span
            :class="[
              'px-2 py-1 text-xs rounded-full',
              dataset.typeColor === 'green' ? 'bg-green-100 text-green-800' : 
              dataset.typeColor === 'blue' ? 'bg-blue-100 text-blue-800' : 
              'bg-purple-100 text-purple-800'
            ]"
          >
            {{ dataset.typeLabel }}
          </span>
        </div>
        <p class="text-sm text-gray-dark mb-4">
          {{ dataset.description }}
        </p>
        <div class="flex justify-between text-sm text-gray-dark mb-4">
          <div><span class="font-medium">样本数:</span> {{ dataset.sampleCount }}</div>
          <div v-if="dataset.chartType !== 'pie' && dataset.chartType !== 'doughnut'">
            <span class="font-medium">特征数:</span> {{ dataset.featureCount }}
          </div>
          <div v-else>
            <span class="font-medium">类别数:</span> {{ dataset.featureCount }}
          </div>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-xs text-gray-dark">上次更新: {{ dataset.lastUpdate }}</span>
          <div class="flex space-x-2">
            <button class="text-gray-dark hover:text-primary transition-colors">
              <i class="fa fa-download"></i>
            </button>
            <button class="text-gray-dark hover:text-primary transition-colors">
              <i class="fa fa-bar-chart"></i>
            </button>
            <button class="text-gray-dark hover:text-primary transition-colors">
              <i class="fa fa-ellipsis-v"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { onMounted, props } from 'vue';
  import Chart from 'chart.js/auto';
  
  const props = defineProps({
    dataset: {
      type: Object,
      required: true
    }
  });
  
  onMounted(() => {
    const ctx = document.getElementById(`datasetChart${props.dataset.id}`);
    
    if (ctx) {
      let chartType = props.dataset.chartType;
      let data = {};
  
      // 为不同的数据集生成不同的图表数据
      if (chartType === 'line') {
        // 负荷预测数据 - 线性图
        const xValues = Array.from({ length: 20 }, (_, i) => i);
        const yValues = xValues.map(
          (x) => Math.sin(x / 3) * 10 + 50 + Math.random() * 5
        );
  
        data = {
          labels: xValues,
          datasets: [
            {
              data: yValues,
              borderColor: '#165DFF',
              backgroundColor: 'rgba(22, 93, 255, 0.1)',
              tension: 0.4,
              fill: true,
            },
          ],
        };
      } else if (chartType === 'pie') {
        // 用户行为数据 - 饼图
        data = {
          labels: ['浏览', '收藏', '购买', '分享'],
          datasets: [
            {
              data: [60, 15, 20, 5],
              backgroundColor: [
                '#165DFF',
                '#36CFC9',
                '#722ED1',
                '#FF7D00',
              ],
              borderWidth: 0,
            },
          ],
        };
      } else if (chartType === 'bar') {
        // 图像分类数据 - 柱状图
        data = {
          labels: [
            '猫', '狗', '鸟', '汽车', '飞机', '花', '树', '人', '房子', '水果',
          ],
          datasets: [
            {
              data: [
                1500, 1400, 1300, 1200, 1100, 1000, 900, 800, 700, 600,
              ],
              backgroundColor: '#165DFF',
            },
          ],
        };
      } else if (chartType === 'doughnut') {
        // 文本情感分析数据 - 环形图
        data = {
          labels: ['积极', '中性', '消极'],
          datasets: [
            {
              data: [40, 45, 15],
              backgroundColor: ['#52C41A', '#FAAD14', '#FF4D4F'],
              borderWidth: 0,
            },
          ],
        };
      }
  
      // 创建图表
      new Chart(ctx, {
        type: chartType,
        data: data,
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: false,
            },
            tooltip: {
              enabled: true,
            },
          },
          scales: {
            x: {
              display: chartType === 'line' || chartType === 'bar',
            },
            y: {
              display: chartType === 'line' || chartType === 'bar',
            },
          },
        },
      });
    }
  });
  </script>  